import React, { PureComponent } from 'react';
import { Modal, Upload, Icon } from 'antd';
import { getToken } from '../../utils/token';
import { host } from '../../utils/request';

export default class ModalChangeAvatar extends PureComponent {
  state = {
    fileList: [],
  };

  componentDidMount() {
    const { avatar } = this.props;
    this.setState({
      fileList: [
        {
          uid: -1,
          url: avatar,
        },
      ],
    });
  }

  handleAvatarChange = ({ fileList }) => {
    this.setState({ fileList: [fileList[fileList.length - 1]] });
  };

  render() {
    const { visible, onCancel, onOk } = this.props;
    const { fileList } = this.state;

    return (
      <Modal title="修改头像" visible={visible} onOk={onOk} onCancel={onCancel}>
        <Upload
          action={`${host}/web/update-avatar`}
          listType="picture-card"
          onChange={this.handleAvatarChange}
          showUploadList={{
            showPreviewIcon: false,
            showRemoveIcon: false,
          }}
          fileList={fileList}
          headers={{ 'access-token': `${getToken()}` }}
        >
          <div>
            <Icon type="plus" />
            <div className="ant-upload-text">修改</div>
          </div>
        </Upload>
      </Modal>
    );
  }
}
